<template>
    <section class="EmployStatus">
        <Table ref="Tabular" :search-options="searchOptions" :tableDatas="list" :isPagenation="false" :loading="loading"
            :pages="pages" :total="total" :columns="columns" @search="handleSearch" @delete="handleDel"
            @editor="handleEditor">
            <template #searchOptLeft>
                <a-button v-permission="['createFlag']" type="primary" @click="handleAdd"><i class="fa fa-plus"
                        style="margin-right: 8px;" />{{ $t("New") }}</a-button>
            </template>
            <template #index="{ row, index }">
                {{ index + 1 }}
            </template>
        </Table>
        <AddDialog v-if="visible" v-model:visible="visible" :target="target" @ok="handleFlush" />
    </section>
</template>

<script setup lang="ts">
import { ref } from "vue";
import Table from "@/components/Table/index.vue";
import { queryMenus, DeleteMenu, queryPageMenus } from "@/api/setting";
import { GetCodeDict, GetBatchCodeDict, DeleteDictItem } from "@/api/public";
import AddDialog from "./add-dialog.vue";
import { message } from "ant-design-vue";
import { useI18n } from "vue-i18n";
import { useLanguage } from "@/hooks/index";
const { isEn, isCn, isArabic } = useLanguage();
const { t: $t } = useI18n();
let pages = ref<object>({ pageSize: 30, pageNo: 1 });
let total = ref(0);
let list = ref<object>([]);
let loading = ref<boolean>(false);
let visible = ref(false);
let target = ref({});
let Tabular = ref(null);
const columns = ref<object>([
    {
        title: "#",
        dataIndex: "index",
        slot: "index",
        align: "left",
        width: 50
    },
    {
        title: () => $t("轮班"),
        dataIndex: "dictData",
        align: "left",
    },
    {
        title: () => $t("nameEn"),
        dataIndex: "dictDesc",
        align: "left",
    },
    {
        title: () => $t("nameZh"),
        dataIndex: "descZh",
        align: "left",
    },
    {
        title: () => $t("nameAr"),
        dataIndex: "descAr",
        align: "left",
    },
    {
        title: () => $t("操作"),
        dataIndex: "opts",
        align: "center",
        slot: "opt",
        edit: true,
        delete: true,
        width: 80,
    },
]);
const handleSearch = async ({ searchForm, pager }: any) => {
    let requestData = {
        dictKey: "employeeRotationDesc",
    };
    loading.value = true;
    const { data } = await GetCodeDict(
        requestData
    ).finally(() => {
        loading.value = false;
    });
    list.value = data;
};
const handleFlush = () => {
    Tabular.value.flush();
};
const handleAdd = () => {
    target.value = {};
    visible.value = true;
};
const handleEditor = (record) => {
    target.value = cloneDeep(record);
    visible.value = true;
};
const handleDel = async (record) => {
    const uuid = record.uuid
    if (!uuid) return
    await DeleteDictItem(uuid)
    message.success($t("操作成功"))
    handleFlush()
};
onMounted(() => {
    handleSearch({ searchForm: { keyword: "employeeRotationDesc" }, pager: { pageSize: 30, pageNo: 1 } });
});
</script>

<style lang="scss" scoped>
.EmployStatus {
    padding: 24px 24px 0 16px;
}
</style>